<template>
	<div>
		<div class = "product-container">
			<el-card v-for = "product in productList" :key = "product.id" class = "product-card" shadow = "hover">
				<img :src = "product.picPath" class = "product-image" alt = "Product Image" />
				<div class = "product-info">
					<h3>{{ product.title }}</h3>
					<p><strong>产地:</strong> {{ product.procity }}</p>
					<p><strong>价格:</strong> ¥{{ product.price }}</p>
					<p><strong>真实销量:</strong> {{ product.realSales }}</p>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script lang = "ts" setup>
import { onMounted, ref } from 'vue'
import Api from '@/api'

interface Product {
	id: string;
	title: string;
	procity: string;
	price: number;
	realSales: string;
	picPath: string;
}

const productList = ref<Product[]>([])
const loading = ref(true)

onMounted(async () => {
	loading.value = true
	Api.getAllProducts()
		.then(response => {
				productList.value = response.data.map((productData: any) => ({
					id: productData.id,
					title: productData.title,
					procity: productData.procity,
					price: productData.price,
					realSales: productData.realSales,
					picPath: productData.picPath
				}) as Product)
			}
		)
	loading.value = false
})
</script>

<style scoped>
.product-container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}

.product-card {
	width: calc(33.333% - 40px); /* Adjust based on the number of columns you want */
	max-width: 300px;
	min-width: 250px;
	transition: transform 0.2s;
}

.product-card:hover {
	transform: scale(1.05);
}

.product-image {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.product-info {
	padding: 10px;
}

.product-info h3 {
	margin-top: 0;
	font-size: 1.2em;
}

.product-info p {
	margin: 5px 0;
}
</style>